<template>
    <div class="cart">
      <div class="group_btn">
        <el-button type="success" @click="addDialog">添加</el-button>
      </div>
      <el-table
       :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
       <el-table-column type="selection" width="55" align="center"></el-table-column>
       <el-table-column type="index" label="序號" width="180" align="center"></el-table-column>
       <el-table-column prop="name" label="類目" width="180" align="center"></el-table-column>
       <el-table-column prop="price" label="價格" align="center"></el-table-column>
       <el-table-column label="數量" align="center">
         <template slot-scope="scope">
            <el-input-number v-model="scope.row.number" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button size="mini" @click="editDialog(scope.$index, scope.row)">編輯</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
          </template>
        </el-table-column>
     </el-table>
     <div class="total_warpper">
      <h3>共計：{{totalPrice}}</h3>
       <h3>總數：{{totalNumber}}</h3>
     </div>
     <!-- 添加彈窗的內容 -->
     <el-dialog title="添加信息" :visible.sync="addIsDialog" class="addDialog">
       <el-form :model="formData">
         <el-form-item label="類目" :label-width="formLabelWidth">
           <el-input v-model="formData.name" autocomplete="off"></el-input>
          </el-form-item>
         <el-form-item label="價格" :label-width="formLabelWidth">
           <el-input v-model="formData.price" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="數量" :label-width="formLabelWidth">
           <el-input v-model="formData.number" autocomplete="off"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="addIsDialog = false">取 消</el-button>
         <el-button type="primary" @click="addSureBtn">確 定</el-button>
       </div>
     </el-dialog>
     <!-- 添加編輯的內容 -->
     <el-dialog title="添加信息" :visible.sync="editIsDialog" class="addDialog">
       <el-form :model="editData">
         <el-form-item label="類目" :label-width="formLabelWidth">
           <el-input v-model="editData.name" autocomplete="off"></el-input>
         </el-form-item>
          <el-form-item label="價格" :label-width="formLabelWidth">
            <el-input v-model="editData.price" autocomplete="off"></el-input>
          </el-form-item>
         <el-form-item label="數量" :label-width="formLabelWidth">
            <el-input v-model="editData.number" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button @click="editIsDialog = false">取 消</el-button>
          <el-button type="primary" @click="editSureBtn">確 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        editIsDialog: false, //編輯彈窗
        addIsDialog: false, //添加彈窗
        multipleSelection: [], //存放已選擇的數據
        formData: {
          name: "",
          price: "",
          number: ""
        },
        editData: {},
        formLabelWidth: "200",
        //表格中的數據
        tableData: [
          {
            name: "蘋果",
            price: 10,
            number: 1
          },
          {
            name: "香蕉",
            price: 20,
            number: 1
          },
          {
            name: "草莓",
           price: 5,
        number: 1
       }
     ]
   };
 },
  methods: {
    // 點擊發生的變化
   handleSelectionChange(val) {
      this.multipleSelection = val; //給定義的數組賦值
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1); //刪除表格的數據
   },
    // 點擊彈出添加彈窗
     addDialog() {
       this.addIsDialog = true;
    },
     // 點擊添加彈窗的確定按鈕
    addSureBtn() {
       this.addIsDialog = false;
       this.tableData.push(this.formData);
      // 初始化添加表單
      this.formData = {
        name: "",
        age: "",
        sex: ""
      };
     },
    // 點擊彈出添加彈窗
     editDialog(index, row) {
       this.editIsDialog = true;
       this.editData = row;
     },
     editSureBtn(row, index) {
       this.editIsDialog = false;
     }
 },
   // 通過computed計算屬性及時改變
   computed: {
    // 總價
    totalPrice() {
       var price_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        price_total +=
           this.multipleSelection[i].price * this.multipleSelection[i].number;
      }
       return price_total;
    },
    // 總數
     totalNumber() {
      var number_total = 0;
      for (var i = 0; i < this.multipleSelection.length; i++) {
        number_total += this.multipleSelection[i].number;
    }
     return number_total;
    }
  },
  components: {}
};
</script>
 
<style scoped>
.cart {
   margin: 50px auto;
 width: 1000px;
 }
.group_btn {
  margin-bottom: 30px;
}
 .addDialog .el-input {
  width: 90%;
}
 .total_warpper {
  text-align: right;
  margin-top: 30px;
}
h3 {
  margin-top: 10px;
}
</style> 